<template>
	<view class="main">
		<view class="header">
			<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/60429202210081733384325.png" mode=""></image>
			<view class="delivergoods">
				<view class="whait" v-if="order">{{zhuangtai == 2?'等待用户确认收货':orderFrom[0]._status._type== -2?'已退款':'等待卖家发货'}}</view>
				<view class="whait" v-if="!order">
					<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/43787202210081646292760.png" mode="">
					</image> 等待买家支付费用
				</view>
				<view class="time" v-if="order">{{zhuangtai == 2?'剩余'+time_tian+'天'+time_shis+'时'+time_fens +'分'+time_miaos+'秒'+'自动收货':orderFrom[0]._status._type== -2?'':'' }}</view>
				<view class="time" v-if="!order">剩余{{time_shi+'时'+time_fen +'分'+time_miao+'秒'}}自动取消订单</view>
			</view>
		</view>
		<view class="addressmag">
			<view class="">
				<text class="msg">{{orderFrom[0].real_name}}</text>
				<text class="msg">{{orderFrom[0].user_phone}}</text>
				<view class="address">地址：{{orderFrom[0].user_address}}</view>
			</view>
		</view>

		<view class="box" v-for="(i,index) in orderFrom" :key="i.id">
			<view class="shoppingmsg">
				<view class="storename" v-if="i.suppliers !=''">
					<image style="width: 40rpx;height: 40rpx;vertical-align: middle;margin:-5rpx 5rpx 0 0;"
						src="http://www.szzn.group/uploads/20221107/227f9c901202e18708a0c2e351894951.png" mode="">
					</image>
					<text>{{i.suppliers.title}}</text>
				</view>
				<view class="" v-for="item in i.cartInfo" :key="item.id" >
					<view class="shoppingone" @click="goDetail(item.productInfo.id)">
						<view class="" >
							<image :src="item.productInfo.image" mode=""></image>
						</view>
						<view class="tow">
							<view class="title" >{{item.productInfo.store_name}}</view>
							<view class="subtitle">{{item.spec.sku}}</view>
							<view class="price">
								<view class="">
									<text  v-if="i.group_id !=6">￥</text><text v-if="item.group_id !=6">{{item.is_spec == 0?item.productInfo.price:item.spec.price}}</text>
									<text v-if="i.group_id ==6">{{item.productInfo.expend_integral+'积分'}}</text>
								</view>
								<view class="shopingnum">x{{item.cart_num}}</view>
							</view>
						</view>
					</view>
					<view class="cost">
						<view class="shoppingtow">
							<view class="">商品数量</view>
							<view class="">x{{item.cart_num}}</view>
						</view>
						<view class="shoppingtow">
							<view class="">商品运费</view>
							<view class="">￥{{i.total_postage}}</view>
						</view>
						<view class="shoppingtow">
							<view class="">会员折扣</view>
							<view class="" style="color: #f00;">￥{{item.truePrice - (item.is_spec==0? item.productInfo.price:item.spec.price) *item.cart_num }}</view>
						</view>
					</view>
				</view>
				<view class="last"> {{i.paid == 0?'待付款：':'已付款：'}} <text class="fuhao" v-if="i.group_id !=6">￥</text>
				<text v-if="i.group_id !=6"  class="paymentprice">{{parseFloat(i.total_price) + parseInt(i.total_postage)}}</text>
				<text v-if="i.group_id ==6" class="paymentprice">{{orderFrom[0].cartInfo[0].productInfo.expend_integral+'积分'}}</text>
				</view>
				<view class="lijipay" v-if="i.paid == 0">
					<view class="" @click="payOrder(i.id)">立即支付</view>
				</view>
				<view class="fenge">
					<view class=""></view>
				</view>
			</view>
		</view>
		<view class="relationservice">
			<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7dc94202210081604129927.png" mode=""></image>
			<view class="">联系客服</view>
			<button open-type="contact">联系客服</button>
		</view>

		<view class="odertime">
			<view class="order">订单编号：{{orderFrom[0].order_id}}
				<image @click="copyText(orderFrom[0].order_id)"
					src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/e0d4c202210081632459425.png"></image>
			</view>
			<view class="order">创建时间：{{payTime}}</view>
		</view>

		<view class="fooder" :class="!order?'yincang':''" v-if="!order">
			<view class="">
				<view class="quxiao">取消订单</view>
				<view class="" @click="payOrder">立即支付</view>
			</view>
		</view>
		<view class="fooder" v-if="order">
			<view class="">
				<view class="" style="opacity: 0;"></view>
				<view class="" @click="applyRefund(orderFrom[0]._status._type,orderFrom[0].group_id)" v-if="orderFrom[0].group_id != 6 &&orderFrom[0]._status._type != -2 ">
					{{orderFrom[0]._status._type ==1?'申请退款':orderFrom[0]._status._type ==2?'确认收货':'待评价'}}</view>
				<view class="" @click="applyRefund(orderFrom[0]._status._type,orderFrom[0].group_id)" v-if="orderFrom[0].group_id == 6" :class="orderFrom[0]._status._type==1?'touming':''">
					{{orderFrom[0]._status._type ==1?'':orderFrom[0]._status._type ==2?'确认收货':'待评价'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		orderDetail,
		towPayOrder,
		applyRefund,
		confirmReceipt,
		countDown,
		closeOrder,
		configHuo
	} from '@/api/api.js'
	export default {
		data() {
			return {
				order: false,
				orderId: '', //订单编号
				orderFrom: [],
				payTime: '',
				orderList: [], //商品列表
				times: '',
				zhuangtai: '',
				time_shi:'',
				time_fen:'',
				time_miao:'',
				time_shis:'',
				time_fens:'',
				time_miaos:'',
				time_tian:''
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.init(this.orderId)
		},
		onShow() {

		},
		methods: {
			// 获取订单详情数据
			init() {
				let data = `uni=${this.orderId}`
				orderDetail(data).then(res => {
					this.orderFrom = res.data.data.order
					this.orderList = res.data.data.order.cartInfo
					this.payTime = this.orderFrom[0].add_time
					let time = new Date(this.payTime * 1000)
					let y = time.getFullYear()  
					let m = time.getMonth() + 1
					let d = time.getDate()
					let h = time.getHours()
					let f = time.getMinutes()
					let s = time.getSeconds()
					if (m < 10) {
						m = '0' + m
					}
					if (f < 10) {
						f = '0' + f
					}
					if (s < 10) {
						s = '0' + s
					}
					this.payTime = y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s
					this.zhuangtai = this.orderFrom[0]._status._type

					if (this.orderFrom[0].paid == 0) {
						this.order = false
					} else {
						this.order = true
					}
					// 倒计时
					let data1 = `id=${this.orderFrom[0].id}`
					countDown(data1).then(res => {
						if(res.data.data.yue_time <=0){
							let data = `uni=${this.orderId}`
							closeOrder(data).thne(res=>{
								if(res.data.code == '200'){
									uni.showToast({
										title:'该订单已自动取消',
										icon:'error',
										duration:1000
									})
									let times = setTimeout(()=>{
										uni.navigateBack()
									},500)
								}
							})
						}
						this.time_miao = parseInt(res.data.data.yue_time%3600%60)
						this.time_fen = parseInt(res.data.data.yue_time%3600/60)
						this.time_shi = parseInt(res.data.data.yue_time/3600)
						this.$forceUpdate()
					})
					
					this.configHuo(this.orderFrom[0].id)
						
				})
			},
			configHuo(id){
				let data2 =`id=${id}`
				configHuo(data2).then(res=>{
					if(res.data.data.yue_time <=0) {
						let data = `uni=${this.orderId}`
						confirmReceipt(data).then(res => {
							if (res.data.code == '200') {
								uni.showToast({
									title: '自动收货成功',
									duration: 1000
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/myIndex/myorder/myorder?index=' + 4
									})
								}, 500)
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000
								})
							}
						})
						return
					}
					this.time_tian = parseInt(res.data.data.yue_time/3600/24)
					this.time_shis = parseInt(res.data.data.yue_time/(3600)-(this.time_tian*24))
					this.time_fens = parseInt(res.data.data.yue_time%3600/60)
					this.time_miaos = parseInt(res.data.data.yue_time%3600%60)
					this.$forceUpdate()
					
				})
			},
			copyText(res) {
				uni.getClipboardData({
					data: res,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			goDetail(id){
				uni.navigateTo({
					url:'/page_home/agriculturaldetail/agriculturaldetail?id='+id
				})
			},
			// 申请退款
			applyRefund(type,group) {
				if(type == 1  && group == 6)return
				if (type == 1) {
					uni.navigateTo({
						url: '/myIndex/applyRefund/applyRefund?orderId=' + this.orderId
					})
				} else {
					let data = `uni=${this.orderId}`
					confirmReceipt(data).then(res => {
						if (res.data.code == '200') {
							uni.showToast({
								title: '收货成功',
								duration: 2000
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/myIndex/myorder/myorder?index=' + 4
								})
							}, 500)
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							})
						}
					})
				}
			},

			payOrder(id) {
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					special_id: id,
					pay_type_num: 50,
					payType: 'weixin',
					from: 'weixin'
				}
				towPayOrder(data).then(res => {
					if (res.data.code == '200') {
						uni.hideLoading()
						let obj = res.data.data.result.jsConfig
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId: obj.appid,
							timeStamp: obj.timestamp, // 时间戳
							nonceStr: obj.nonceStr, // 随机字符串
							package: obj.package,
							signType: obj.signType, // 签名算法
							paySign: obj.paySign, // 签名
							success: function(red) {
								uni.reLaunch({
									url: '/page_shoppingcart/paysucceed/paysucceed?orderId=' +
										res.data.data.result.orderId
								})

							},
							fail: function(err) {
								uni.showToast({
									title: '支付失败',
									duration: 1500
								})
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.yincang {
		opacity: 0
	}

	.main {
		background-color: #fafafa;
		width: 100%;
		height: 100vh;
	}

	.header {
		padding: 30rpx;
		position: relative;
		background-color: #fff;

		image {
			width: 100%;
			height: 210rpx;
			border-radius: 20rpx;
		}

		.delivergoods {
			position: absolute;
			top: 50%;
			left: 10%;
			color: #fff;
			transform: translateY(-50%);

			image {
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
				margin-right: 15rpx;
			}
		}

		.whait {
			padding: 10rpx 40rpx;
			font-size: 32rpx;
		}

		.time {
			font-size: 26rpx;
		}
	}

	.addressmag {
		background-color: #fff;
		padding: 20rpx 30rpx;
	}

	.msg {
		display: inline-block;
		padding: 10rpx 0;
		font-size: 28rpx;
	}

	.address {
		padding: 10rpx 0;
		font-size: 24rpx;
	}

	.shoppingmsg {
		// margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 25rpx 30rpx;

		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;
		}

		.title {
			font-weight: 700;
			font-size: 28rpx;
			width: 500rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.subtitle {
			font-size: 26rpx;
			color: #ccc;
			margin: 5rpx 0 20rpx 0;
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 700;

			text {
				font-size: 26rpx;

			}
		}

		.shopingnum {
			font-size: 26rpx;
			color: #ccc;
			font-weight: 400;
		}
	}

	.shoppingone {
		display: flex;
		border-bottom: 1px solid #eee;
		padding: 40rpx 0rpx;

		.tow {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	.cost {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.shoppingtow {
		font-size: 28rpx;
		padding: 7rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.storename {
		font-size: 30rpx;
		color: #ccc;
	}

	.last {
		text-align: right;
		margin-top: 0rpx;
		padding: 20rpx 0;
		font-size: 28rpx;

		.fuhao {
			font-size: 24rpx;
			color: #387959;
		}

		.paymentprice {
			font-size: 32rpx;
			color: #387959;
			font-weight: 700;
		}
	}

	.relationservice {
		display: flex;
		align-items: center;
		justify-content: center;
		// margin: 20rpx 0 !important;
		padding: 30rpx;
		background-color: #fff;
		position: relative;
		border-bottom: 2px solid #f5f5f5;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}

		button {
			// padding: 0 !important;
			margin: 0 !important;
			position: absolute;
			opacity: 0;
		}
	}

	.odertime {
		background-color: #fff;
		padding: 20rpx 20rpx 170rpx;
		// margin: 20rpx 0;

		image {
			width: 35rpx;
			height: 35rpx;
			vertical-align: middle;
			margin-left: 15rpx;
		}
	}

	.order {
		font-size: 26rpx;
		color: #ccc;
	}

	.fooder {
		position: fixed;
		bottom: 0;
		right: 0;
		padding: 30rpx 0;
		background-color: #fff;
		box-shadow: 0 -1px 8px 1px #eee;
		width: 100%;

		>view:nth-child(1) {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;

			>view:nth-child(1) {
				border-radius: 50px;
				border: 1px solid #eee;
				padding: 20rpx 35rpx;
			}

			>view:nth-child(2) {
				margin: 0 25rpx;
				border-radius: 50px;
				border: 1px solid #bbdaca;
				padding: 20rpx 35rpx;
				color: #5f947b;
			}
		}
	}

	.quxiao {
		opacity: 0;
	}

	.lijipay {
		padding: 15rpx 0 0 0;
		font-size: 26rpx;
		// border-top: 1px solid #eee;
		display: flex;
		justify-content: flex-end;

		view {
			color: #67c49a;
			border: 1px solid #67c49a;
			border-radius: 50px;
			width: 160rpx;
			text-align: center;
			padding: 10rpx 5rpx;

		}
	}

	.box {
		border-bottom: 2px solid #f5f5f5;
	}
	.touming {
		border: 0;
		opacity: 0;
	}
</style>
